import React, { ReactElement, useMemo } from 'react';
import { View, Image, Text } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { blackLeft, blackBgBack } from '../../../../constant/resource';
import navigator from '../../../../util/navigator';
import statusBarManager from '../../../../util/native/statusBarManager';

interface HeaderProp {
  opacity: number;
}

export default ({ opacity }: HeaderProp): ReactElement => {
  if (opacity > 0.5) statusBarManager.setBarStyle('dark-content', true);
  else statusBarManager.setBarStyle('light-content', true);

  return useMemo(
    (): ReactElement => (
      <View style={styles.headerContainer}>
        <View style={styles.header}>
          <Button
            style={styles.back}
            onPress={(): void => {
              navigator.goBack();
            }}
          >
            <Image style={styles.backIcon} source={blackBgBack} />
          </Button>
        </View>

        <View style={[styles.stickHeader, { opacity }]}>
          <Button
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            style={styles.stickBack}
            onPress={(): void => {
              navigator.goBack();
            }}
          >
            <Image style={styles.stickBackIcon} source={blackLeft} />
          </Button>
          <Text style={styles.title}>课程详情</Text>
        </View>
      </View>
    ),
    [opacity]
  );
};
